<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input  style="width: 200px;"   v-model="query.caseNumber" placeholder="立案号" class="filter-item"  ></el-input>
      <el-input  style="width: 200px;"   v-model="query.baoXianName" placeholder="被保险人" class="filter-item"  ></el-input>
      <el-input  style="width: 200px;"   v-model="query.carNumber" placeholder="车牌号" class="filter-item"  ></el-input>
      <el-input type="number" style="width: 120px;"   v-model="query.dingSunPrice[0]" placeholder="定损金额" class="filter-item"  ></el-input>
      <span> - </span>
      <el-input type="number" style="width: 120px;"   v-model="query.dingSunPrice[1]" placeholder="定损金额" class="filter-item"  ></el-input>
      <br/>
      <el-date-picker class="filter-item"
                      v-model="query.chuXianDate"
                      type="datetimerange"
                      :picker-options="pickerOptions"
                      range-separator="至"
                      start-placeholder="出险时间"
                      end-placeholder="出险时间"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
      >
      </el-date-picker>
      <el-date-picker class="filter-item"
                      v-model="query.createdAt"
                      type="datetimerange"
                      :picker-options="pickerOptions"
                      range-separator="至"
                      start-placeholder="创建时间"
                      end-placeholder="创建时间"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
      >
      </el-date-picker>

      <el-button @click="getRecords" type="primary" class="filter-item">查询</el-button>
      <el-button @click="reload" type="primary" class="filter-item">刷新</el-button>

    </div>

    <el-table v-loading="listLoading"	:data="list"	element-loading-text="Loading"	border	fit	highlight-current-row
              @selection-change="handleSelectionChange" v-horizontal-scroll="'always'"
    >
       <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="ID" width="50" />
      <el-table-column prop="case_number" label="立案号" width="190" />
      <el-table-column prop="chu_xian_date" label="出险日期" width="160" />
      <el-table-column prop="bao_xian_name" label="被保险人" width="100" />
      <el-table-column prop="car_number" label="车牌号" width="120" />
      <el-table-column prop="car_jia_number" label="车架号" width="180" />
      <el-table-column prop="ding_sun_price" label="定损金额" width="120" />
      <el-table-column prop="status_name" label="状态名" width="120" />
      <el-table-column prop="created_at" label="创建时间" width="160" />
      <el-table-column prop="bank_account_name" label="开户名称" width="160" />
      <el-table-column prop="bank_type" label="开户行" width="160" />
      <el-table-column prop="bank_card" label="银行卡" width="160" />
      <el-table-column prop="invoice_url" label="电子发票" width="120" >
        <template slot-scope="scope">
          <el-button v-if="scope.row.invoice_url" size="mini" type="text" @click="preview(scope.row)">预览</el-button>
        </template>
      </el-table-column>

      <el-table-column prop="reason" label="拒绝理由" width="120" >

      </el-table-column>

<!--      <el-table-column fixed="right" label="操作" width="130">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="pass(scope.row)">完成</el-button>
          <el-button size="mini" type="text" @click="notPass(scope.row)">拒绝</el-button>
        </template>
      </el-table-column>-->
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.page"
      :page-sizes="[10, 20, 100, 200]"
      :page-size="pagination.pageSize"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>

  </div>




</template>

<script>
import { myGet } from '@/utils/myRequest'

const urlLst = '/guard/order/index?status=10';
const urlPass = '/guard/order/end';
const urlNotPass = '/guard/order/repayNotPass';
export default {

  data(){
    return {
      list:[],
      host:process.env.VUE_APP_HOST,
      listLoading:false,
      selectAll:[],
      mapStatus:[],
      query:{
        caseNumber: '',
        baoXianName:'',
        baoxianNumber:'',
        carNumber:'',
        chuXianDate:[],
        dingSunPrice:['',''],
        createdAt:[],
      },
      pagination:{
        total:0,
        page:1,
        pageSize:20,
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },

  methods:{

    reload(){
      Object.assign(this.$data.query,this.$options.data().query)
      Object.assign(this.$data.pagination,this.$options.data().pagination)
      this.getRecords()
    },
    getRecords(){
      this.listLoading = true;
      let params = Object.assign(this.query,this.pagination)
      myGet(urlLst,params).then((res) =>{
        this.listLoading = false;
        if(res.status){
          this.list = res.data.records
          this.pagination.total = res.data.total
        }
      })
    },

    preview(row){
      const url = "https://bjyoupei.techbz.cn"+row.invoice_url
      window.open(url)
    },

    pass( row) {
      this.$confirm('确定完成吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let id = row.id
        myGet(urlPass, { id }).then(res => {
          if (res.status) {
            this.$message.success(res.msg);
            this.reload();
          }
        })
      })
    },

    batchPass(){
      this.$confirm('确定完成吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let id = this.selectAll;
        myGet(urlPass, { id }).then(res => {
          if (res.status) {
            this.$message.success(res.msg);
            this.reload();
          }
        })
      })
    },

    handleSelectionChange(val){
      this.selectAll = []
      val.forEach(element => {
        this.selectAll.push(element.id)
      });
    },


    notPass( row) {
      const id = row.id
        this.$prompt('请输入理由', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {

          myGet(urlNotPass+"?id="+id+"&reason="+value).then(res=>{
            if(res.status){
              this.reload()
            }
          })
        })
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.pagination.page = 1
      this.getRecords()
    },
    handleCurrentChange(val) {
      this.pagination.page = val
      this.getRecords();
    },
  },
  mounted() {
    this.getRecords()
  }

}
</script>

<style scoped>

</style>
